<template>
  <div class="add-row-price">
    <!-- {{rowData}} -->
    <el-row :gutter="20" v-for="(row, index) in rowData" :key="index" class="row-item">
      <!--<el-col v-if="(index+1) == 1">-->
        <!--<label>价格信息</label>-->
      <!--</el-col>-->
      <el-col>
        <label>记录时间:</label>
        <el-date-picker
          v-model="row.inputtimep"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-col>
      <el-col>
        <label>均价:</label>
        <el-input
          class="row-ipt"
          placeholder="请输入均价"
          v-model="row.average_price">
        </el-input>
      </el-col>
      <el-col>
        <label>起价:</label>
        <el-input
          class="row-ipt"
          placeholder="请输入起价"
          v-model="row.start_price">
        </el-input>
      </el-col>
      <el-col>
        <label>价格描述:</label>
        <el-input
          class="row-ipt"
          placeholder="请输入价格描述"
          v-model="row.des">
        </el-input>
      </el-col>
      <el-col>
        <i v-if="(index+1) == 1" class="add-icon el-icon-circle-plus" @click="addRow(row)"></i>
        <i v-else class="add-icon el-icon-remove" @click="deleteRow(row)"></i>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'AddRowPrice',
    props: {
        propData: {
            type: Array,
            required: false,
            default:function(){
                return [{
                    id: 0,
                    inputtimep: '',
                    average_price: '',
                    start_price: '',
                    des: ''
                }]
            }
        }
    },
    data () {
      return {
        rowData: [
            {
                id: 0,
                inputtimep: '',
                average_price: '',
                start_price: '',
                des: ''
            }
        ]
      }
    },
    watch: {
      'rowData': {
        deep:true,
        handler(val){
          this.$emit('dataPriceChange', val)
        }
      }
    },
    methods: {
      addRow (row) {
          for(let idx in this.rowData){
              this.rowData[idx].id == idx
          }
          let obj = {
            //row.id + 1,
            id: this.rowData.length,
              inputtimep: '',
              average_price: '',
              start_price: '',
              des: ''
          }
        this.rowData.push(obj)
      },
      deleteRow (row) {
          for(let idx in this.rowData){
              if(this.rowData[idx].id == row.id){
                  this.$delete(this.rowData, idx)
                  break;
              }
          }
//        this.$delete(this.rowData, row.id - 1)
      }
    },
    created() {
        if (this.propData.length > 0) {
            for(let idx in this.propData){
                this.propData[idx]['id'] = parseInt(idx)
            }
            this.rowData = this.propData;
        }
    }
  }
</script>

<style lang="scss" scoped>
.add-row-price {
  color: #5a5e66;
  font-size: 14px;
  .row-item {
    margin-bottom: 20px;
  }
  .el-col-24 {
    width: inherit;
  }
  .el-col {
    .el-date-editor.el-input {
      /*width: 100px;*/
    }
    .row-ipt {
      width: inherit;
      min-width: 100px;
      font-size: 12px;
      margin-right: 5px;
    }
    .add-icon {
      color: #2da3fb;
      font-size: 30px;
    }
  }
  .el-col:first-child {
    label {
      line-height: 32px;
    }
  }
  .el-col+.el-col {
    padding-left: 0 !important;
  }
  .el-col:first-child:before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
  }
}
</style>
